<template>
  <div>
    <Modal v-model="againPop" width="40" class-name="vertical-center-modal" :closable="false" :mask-closable="false">
      <!-- 页头 -->
      <div slot="header" class="header">
        <div class="top">
          <div class="tit">{{ $t('pay.again_text_btn') }}</div>
          <Icon type="md-close" class="close-btn" @click="onCancel()" />
        </div>
        <!-- 中文 -->
        <div class="desc-text" v-if="userLanguage.code == 'zh_CN'">
          此条汇款单还可修改<span class="num">{{ repeatNum }}</span>次
        </div>
        <!-- 英文 -->
        <div class="desc-text" v-if="userLanguage.code == 'en_US'">
          This remittance can be modified <span class="num">{{ repeatNum }}</span> more time.
        </div>
        <!-- 德语 -->
        <div class="desc-text" v-if="userLanguage.code == 'de_DE'">
          Diese Überweisung kann noch <span class="num">{{ repeatNum }}</span> einmal bearbeitet werden.
        </div>
        <!-- 法语 -->
        <div class="desc-text" v-if="userLanguage.code == 'fr_FR'">
          Ce bordereau de virement peut encore être modifié <span class="num">{{ repeatNum }}</span> fois
        </div>
        <!-- 意大利语 -->
        <div class="desc-text" v-if="userLanguage.code == 'it_IT'">
          Questa ricevuta di bonifico può essere ancora modificata <span class="num">{{ repeatNum }}</span> volte
        </div>
        <!-- 波兰语 -->
        <div class="desc-text" v-if="userLanguage.code == 'pl_PL'">
          o zamówienie przelewu można nadal modyfikować <span class="num">{{ repeatNum }}</span> razy
        </div>
        <!-- 葡萄牙语 -->
        <div class="desc-text" v-if="userLanguage.code == 'pt_PT'">
          Esta ordem de transferência ainda pode ser modificada <span class="num">{{ repeatNum }}</span> vezes
        </div>
        <!-- 西班牙语 -->
        <div class="desc-text" v-if="userLanguage.code == 'es_ES'">
          Esta orden de remesa aún se puede modificar <span class="num">{{ repeatNum }}</span> veces
        </div>
      </div>
      <!-- 内容 -->
      <div class="content-wrap">
        <div class="list-info">
          <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.give_user_name') }}</div>
          <Input v-model="formValidate.transferName" :placeholder="$t('pay.tip_input_text')"></Input>
        </div>
        <div class="list-info">
          <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.remittance_bank') }}</div>
          <Input v-model="formValidate.transferBank" :placeholder="$t('pay.tip_give_bank_text')"></Input>
        </div>
        <div class="list-info">
          <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.remittance_credentials') }}</div>
          <Input v-model="formValidate.transferNo" :placeholder="$t('pay.tip_give_no_text')"></Input>
        </div>
        <div class="list-info">
          <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.give_currency') }}</div>
          <Select v-model="formValidate.currencyCode" class="select-sty">
            <Option v-for="(item, index) in currencyList" :key="index" :value="item.code">{{ item.code }}
            </Option>
          </Select>
        </div>
        <div>
          <div class="flex-sty">
            <div class="list-info" style="margin-bottom: 0;">
              <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.remittance_amount') }}</div>
              <Input v-model="formValidate.transferAmount" :placeholder="$t('pay.tip_give_amount_text')"
                class="select-sty" @on-blur="changeMet(formValidate.transferAmount)"></Input>
            </div>
            <img src="@/assets/images/user/concat.png" class="concat-sty" alt="">
            <div class="list-info" style="margin-bottom: 0;">
              <div class="top-tit">{{ $t('pay.handlingCharge') }}</div>
              <div class="sep-sty">
                <div class="left">{{ formValidate.handleFee }}</div>
                <div class="right">{{ formValidate.currencyCode }}</div>
              </div>
            </div>
          </div>
          <div class="currency-text">
            {{ $t('pay.about_text') }}≈ <span class="amount-num">{{ userCurrency.code }} {{ balanceAmount || 0 }}</span>
            <Tooltip :content="$t('pay.tip_content_txt')" transfer max-width="330" placement="right">
              <Icon type="ios-help-circle-outline" class="icon-desc" />
            </Tooltip>
          </div>
        </div>
        <div class="list-info">
          <div class="top-tit"><span class="imp-icon">*</span>{{ $t('pay.give_upload_text') }}</div>
          <Upload :show-upload-list="false" :headers="{
            'X-Access-Token': userToken,
            'lang': 'en_US'
          }" biz="chat" :data="{
            biz: 'custom'
          }" name="file" :disabled="uploadLoading" :max-size="3072" :before-upload="() => handleBeforeUpload()"
            :on-success="(response) => onSuccess(response)" :on-exceeded-size="() => handleMaxSize(file)"
            :action="uploadURL" :accept="'.png,.jpg,.jpeg'">
            <div class="loading-wrap" v-if="uploadLoading">
              <t-loading></t-loading>
            </div>
            <div v-if="formValidate.transferImage != '' && !uploadLoading" class="preview-img">
              <img class="upload-image" :src="formValidate.transferImage" alt="" />
              <img src="@/assets/images/public/delete.png" class="delete-icon" @click="removeMet($event)" alt="">
              <div class="overlay"></div>
            </div>
            <div v-if="!formValidate.transferImage & !uploadLoading" class="upload-sty">
              <img src="@/assets/images/home/add.png" class="upload-img" alt="">
            </div>
          </Upload>
          <div class="exp-txt" @click="lookMet()">{{ $t('pay.look_exp_txt') }}</div>
        </div>
      </div>
      <!-- 底部 -->
      <div slot="footer" class="footer-wrap">
        <div class="cancel-btn" @click="onCancel()">{{ $t('public.cancel') }}</div>
        <div class="confirm-btn" @click="onSubmit()">{{ $t('transport.submit') }}</div>
      </div>
    </Modal>
    <examples-pop ref="examplesRef"></examples-pop>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getSubmitRepeat, getTransferAmount } from "@/api/pay";
import { commonUpload } from "@/api/sys";
import TLoading from "@/components/t-loading";
import ExamplesPop from '../../pay/compontents/examples-pop.vue';
export default {
  components: { TLoading, ExamplesPop },
  data() {
    return {
      againPop: false,
      repeatNum: '',
      balanceAmount: '',
      formValidate: {
        transferName: '',
        transferBank: '',
        transferNo: '',
        currencyCode: 'EUR',
        transferImage: '',
        handleFee: '0'
      },
      uploadLoading: false,
      userToken: localStorage.getItem("USER_TOKEN"),
      uploadURL: commonUpload(),
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      userLanguage: (state) => state.user.userLanguage,
      currencyList: (state) => {
        // 币种列表
        let list = [];
        if (state.config.config) {
          list = state.config.config.currencyList;
        }
        // 过滤掉 code 为 CNY 的元素
        list = list.filter(item => item.code !== 'CNY');
        return list;
      }
    }),
  },
  methods: {
    open(item) {
      this.repeatNum = item.repeatNum;//剩余提交次数
      this.formValidate.id = item.id;
      this.againPop = true;
    },
    handleMaxSize(file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        this.formValidate.transferImage = data.url;
      } else {
        this.$Message.error(response.message);
      }
    },
    onError() {
      this.$webToastObj({
        message: this.$t('user.uploadFailure'),
        time: 2000
      });
    },
    handleBeforeUpload() {
      this.uploadLoading = true;
    },
    removeMet(event) {
      event.stopPropagation();
      // 删除图片
      this.formValidate.transferImage = '';
    },
    onCancel() {
      this.againPop = false;
      this.formValidate.transferName = '';
      this.formValidate.transferBank = '';
      this.formValidate.transferNo = '';
      this.formValidate.currencyCode = 'EUR';
      this.formValidate.transferAmount = '';
      this.formValidate.handleFee = '0';
      this.balanceAmount = '0';
      this.formValidate.transferImage = '';
    },
    changeMet(val) {
      if (val) {
        const regex = /^\d+$/;
        if (!regex.test(this.formValidate.transferAmount)) {
          this.$Message.error(this.$t('pay.amount_typeof_tip_text'));
          return;
        } else {
          if (val < 20) {
            this.$Message.error(this.$t('pay.amount_tip_text'));
          }

          let obj = {
            amount: Number(val),
            id: this.formValidate.id,
            currencyCode: this.formValidate.currencyCode
          }
          getTransferAmount(obj).then((res) => {
            this.balanceAmount = res.result.rechargeAmount;//充值到余额的金额
            this.formValidate.handleFee = res.result.serviceFee;//手续费
          })
        }
      } else {
        this.balanceAmount = '0';//充值到余额的金额
        this.formValidate.handleFee = '0';//手续费
        this.$Message.error(this.$t('pay.tip_give_amount_text'))
      }
    },
    onSubmit() {
      if (!this.formValidate.transferName) {
        this.$Message.error(this.$t('pay.tip_input_text'));
        return;
      }

      if (!this.formValidate.transferBank) {
        this.$Message.error(this.$t('pay.tip_give_bank_text'));
        return;
      }

      if (!this.formValidate.transferNo) {
        this.$Message.error(this.$t('pay.tip_give_no_text'));
        return;
      }

      if (!this.formValidate.transferAmount) {
        this.$Message.error(this.$t('pay.tip_give_amount_text'));
        return;
      }

      if (!this.formValidate.transferImage) {
        this.$Message.error(this.$t('pay.image_tip_txt'));
        return;
      }

      if (this.formValidate.transferAmount < 21) {
        this.$Message.error(this.$t('pay.amount_tip_text'));
        return;
      }

      getSubmitRepeat(this.formValidate).then((res) => {
        if (res.code == 200) {
          this.againPop = false;
          this.$emit('updateMet');
          this.formValidate.transferName = '';
          this.formValidate.transferBank = '';
          this.formValidate.transferNo = '';
          this.formValidate.currencyCode = 'EUR';
          this.formValidate.transferAmount = '';
          this.formValidate.handleFee = '0';
          this.balanceAmount = '0';
          this.formValidate.transferImage = '';
          this.$Message.success(this.$t('transport.submitSSuccess'));
        }
      })
    },
    lookMet() {
      this.$refs.examplesRef.open();
    },
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-header) {
  border: none;
  padding: 32px;
}

:deep(.ivu-modal-body) {
  padding: 0 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 32px;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .header {
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tit {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24px;
        color: #1E1714;
        line-height: 28px;
      }

      .close-btn {
        font-weight: 500;
        font-size: 32px;
        color: #1E1714;
        line-height: 28px;
        cursor: pointer;
      }
    }

    .desc-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #AEB0B9;
      line-height: 24px;
      margin-top: 12px;

      .num {
        color: #FF186B;
      }
    }
  }

  .content-wrap {
    padding-right: 40px;
    height: 436px;
    overflow: auto;

    .info-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #767B93;
      line-height: 19px;
      margin-bottom: 30px;
    }



    .list-info {
      margin-bottom: 24px;

      :deep(.ivu-input) {
        height: 46px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E9EAF3;
        font-size: 18px;
        line-height: 46px;
      }

      .top-tit {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #1E1714;
        line-height: 24px;
        margin-bottom: 12px;

        .imp-icon {
          color: #FF186B;
        }
      }

      .preview-img {
        position: relative;
        cursor: pointer;

        .upload-image {
          width: 132px;
          height: 132px;
          border-radius: 3px;
        }

        .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 132px;
          height: 132px;
          display: block;
          border-radius: 3px;
          background-color: rgba(0, 0, 0, 0.1);
        }

        .delete-icon {
          display: none;
        }
      }

      .preview-img:hover>.overlay {
        display: block;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, 0.5);
      }

      .preview-img:hover>.delete-icon {
        display: block;
        width: 24px;
        height: 24px;
        position: absolute;
        top: 54px;
        left: 54px;
        z-index: 2,
      }

      .upload-sty {
        width: 132px;
        height: 132px;
        border-radius: 3px;
        background: #F9F9F9;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;

        .upload-img {
          width: 48px;
          height: 48px;
        }
      }
    }

    .flex-sty {
      display: flex;
      align-items: center;
      gap: 16px;

      .list-info {
        margin-bottom: 24px;

        :deep(.ivu-input) {
          height: 46px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #E9EAF3;
          font-size: 18px;
          line-height: 46px;
        }

        .top-tit {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #1E1714;
          line-height: 24px;

          .imp-icon {
            color: #FF186B;
          }
        }
      }

      .ivu-form-item {
        margin-bottom: 8px;
      }

      .sep-sty {
        min-width: 184px;
        height: 46px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #E9EAF3;
        display: flex;
        align-items: center;

        .left {
          min-width: 102px;
          height: 46px;
          padding: 12px 20px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #AEB0B9;
          line-height: 19px;
          background: #F7F9FC;
        }

        .right {
          padding: 12px 24px;
          border-left: 1px solid #E9EAF3;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #AEB0B9;
          line-height: 19px;
          background: #F7F9FC;
        }
      }

      .concat-sty {
        width: 24px;
        height: 24px;
        margin-top: 28px;
      }
    }

    .currency-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
      margin-bottom: 24px;
      margin-top: 8px;

      .amount-num {
        color: #FF196B;
      }

      .icon-desc {
        color: #000000;
        font-size: 21px;
        font-weight: 600;
        cursor: pointer;
        margin-left: 7px;
      }
    }

    .label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #1E1714;
      line-height: 24px;
      margin-bottom: 12px;
      margin-top: 20px;
    }

    .mar-sty {
      margin-top: 0px;
    }

    .list-sty {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid #E9EAF3;

      .left {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #1E1714;
        line-height: 24px;
      }

      .gray-text {
        color: #767B93;
      }

      .right {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #FF186B;
        line-height: 24px;
        cursor: pointer;
      }
    }

    .select-sty {
      width: 268px;

      :deep(.ivu-select-selection) {
        height: 46px;
        border-radius: 4px 4px 4px 4px;
      }

      :deep(.ivu-select-selected-value) {
        font-size: 18px;
        line-height: 46px;
      }
    }

    .exp-txt {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #FF186B;
      line-height: 19px;
      margin-top: 12px;
      cursor: pointer;
    }
  }

  .content-wrap::-webkit-scrollbar {
    width: 10px;
    /* 设置滚动条的宽度 */
  }

  .content-wrap::-webkit-scrollbar-track {
    background: #F5F6FA;
    /* 设置轨道的背景颜色 */
  }

  .content-wrap::-webkit-scrollbar-thumb {
    background: #E6E8ED;
    /* 设置滑块的背景颜色 */
    border-radius: 24px;
  }

  .text-tip {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #767B93;
    line-height: 19px;
    text-align: right;
    margin-top: 20px;
  }

  .footer-wrap {
    display: flex;
    justify-content: end;
    gap: 20px;

    .cancel-btn {
      min-width: 112px;
      padding: 12px 40px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #FF186B;
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 18px;
      color: #FF186B;
      line-height: 21px;
      cursor: pointer;
    }

    .confirm-btn {
      min-width: 112px;
      padding: 12px 40px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #FF186B;
      background: #FF186B;
      font-family: Open Sans, Open Sans;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 21px;
      cursor: pointer;
    }
  }
}
</style>
